<template>

  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <el-tag type="dark">仓库管理系统</el-tag>
          <el-tag type="dark">用户名：{{name}}</el-tag>
        </el-col>

        <el-col :span="8">&nbsp;</el-col>

        <el-col :span="8" align="right">
          <el-button type="primary" size="mini" @click="first">首页</el-button>
          <el-button type="primary" size="mini" @click="updatePwd">修改密码</el-button>
          <el-button type="primary" size="mini" @click="loginOut">退出系统</el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']" text-color="white" background-color="#333333" router>

          <template v-for="x in list">
            <el-submenu :index="x.index">
              <template slot="title">{{x.name}}</template>
              <template v-for="y in x.children">
                <el-menu-item :index="y.url">
                  <template>{{y.name}}</template>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>

      <el-main>
        <!-- 对话框组件（添加用户）-->
        <el-dialog title="修改密码" :visible.sync="isShow" width="50%">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 邮件验证 -->
            <template>
            <el-form  label-width="100px" >
              <el-form-item label="邮箱">
                <el-col :span="20">
                  <el-input v-model="ruleForm.email"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="8" align="center">
                    <el-button type="success" size="mini" @click="sendCode" :disabled="isDis">发送验证码({{num}})</el-button>
                    </el-col>
                  <!-- <el-col :span="12" align="center">
                  </el-col> -->
                  <el-col :span="4" align="center"></el-col>
                </el-row>
              </el-form-item>
            </el-form>
            </template>

            <el-form-item label="验证码" prop="code">
              <el-input v-model.number="ruleForm.code"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">确认</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  export default {
    name: "index",
    data() {
      //修改密码
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > 100000000) {
              callback(new Error('请输入有效验证码'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        list: [], //左边框列表数据
        name: "", //用户名
        ws: "",
        isShow: false,
        num:10,//倒计时
        isDis:false,
        ruleForm: {
          pass: '',
          checkPass: '',
          email:'',
          code: ''
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          age: [{
            validator: checkAge,
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      queryByName() {
        var self = this;
        this.name = sessionStorage.getItem("name");
        console.log(this.name);
        var http = this.$http.post("/user/index", this.$qs.stringify({
          "name": this.name
        }));
        http.then(function(rs) {
          if (rs.data.code == 200) {
            // self.list = rs.data.data;
            self.list = rs.data.data;
            console.log("200:" + rs.data.data);
          } else {
            console.log("500" + rs.data.data);
            alert(rs.data.info);
            self.$router.replace("/");
            location.reload();
          }

        })
      },
      // 退出登录
      loginOut() {
        var self = this;
        var http = this.$http.post("/user/logout");
        http.then(function(rs) {
          if (rs.data.code == 200) {
            self.$alert("登出成功");
            sessionStorage.clear();
            self.$router.replace("/");
            location.reload();
          } else {
            self.$alert("失败");
          }

        })
      },
      //发送邮件验证码
      sendCode() {
        var self = this;
        this.$http.post("/user/pwdSendEmailCode",
                        this.$qs.stringify(this.ruleForm)
                        ).then(function(rs){
                          if(rs.data.code==200){
                            self.$alert(rs.data.info);
                            self.isDis = true;
                            var time = setInterval(function(){
                              self.num--;
                              if(self.num == 0){
                                self.isDis = false;
                                self.num = 10;
                                clearInterval(time);
                              }
                            },1000);
                          }else{
                            self.$alert(rs.data.info);
                          }
                        })
      },

      //修改密码
      //提交按钮 (确认修改)
      submitForm() {
        var self = this;
        var http = this.$http.post("/user/updatePwd",this.$qs.stringify(this.ruleForm));
        http.then(function(rs){
          if(rs.data.code==200){
            self.$alert(rs.data.info);
          }else{
            self.$alert(rs.data.info);
          }
        })
      },
      //重置按钮
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      updatePwd() {
        var self = this;
        this.isShow = true;
      },

      createWs() { //创建websocket对象
        var self = this;
        this.ws = new WebSocket("ws://localhost:8080/kickWs");
        //打开事件
        this.ws.onopen = function() {
            console.log("客户端打开");
            //发送用户名给服务端
            self.ws.send(self.name);
          },
          //关闭事件
          this.ws.onclose = function() {
            console.log("客户端关闭");
          },
          //接收服务端发送的消息
          this.ws.onmessage = function(msg) {
            console.log("服务端发送的消息是" + msg);

            if (msg.data == "已登录") {
              //信息提示
              self.$alert("你的账号已经在其他地方登陆", "提示下线", {
                confirmButtonText: "我要下线",
                callback: function() {
                  //回到登录页面
                  self.$router.replace("/");
                  //刷新样式
                  self.$router.go(0);
                }
              })
            }
          },
          //异常触发的事件
          this.ws.onerror = function(rs) {
            console.log("客户端出现异常" + rs);
          }
      },
      
      //跳转到首页
      first() {
        this.$router.replace("/index/userList");
      }
    },
    mounted() {
      //
      this.queryByName();

      //运行踢人服务
      // this.createWs();
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }


  .el-header {
    background-color: #444444;
    color: white;
    padding-top: 15px;

  }

  .el-aside {
    background-color: #333333;
    color: white;
    height: 100%;
  }

  .el-main {
    background-color: white;
    color: #333;
  }
</style>
